import React, { useState } from 'react';
import { Space, Switch, Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface DataType {
  key: React.ReactNode;
  name: string;
  age: number;
  address: string;
  children?: DataType[];
}

const columns: TableColumnsType<DataType> = [
  {
    title: '用户名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '用户昵称',
    dataIndex: 'age',
    key: 'age',
    width: '12%',
  },
  {
    title: '邮箱',
    dataIndex: 'address',
    width: '30%',
    key: 'address',
  },
  {
    title: '手机',
    dataIndex: 'title',
    width: '30%',
    key: 'address',
  },
];

const data: DataType[] = [
  {
    key: 1,
    name: '啊时间啊好久好久',
    age: 60,
    address: '大萨达湿哒哒孙菲菲光度法',
    children: [
      {
        key: 11,
        name: 'J第三方斯蒂芬斯蒂芬',
        age: 42,
        address: '三等奖但是第十九届手动滑稽',
      },
      {
        key: 12,
        name: 'J还是觉得建设大街.',
        age: 30,
        address: '辅导时间好家伙',
        children: [
          {
            key: 121,
            name: '电饭锅回顾日本好不好吃',
            age: 16,
            address: '丹参滴丸算得上是',
          },
        ],
      },
      {
        key: 13,
        name: '阿达撒时间段数据接口',
        age: 72,
        address: '水电费水电费胜多负少',
        children: [
          {
            key: 131,
            name: '收到反馈块钱的交换机',
            age: 42,
            address: '水电费水电费水电费',
            children: [
              {
                key: 1311,
                name: '电视剧啊电化教育也方便不卡张卡',
                age: 25,
                address: '未发货防静电未回复',
              },
              {
                key: 1312,
                name: '第三段时时刻刻你加班',
                age: 18,
                address: '薪酬改革的合规文化',
              },
                {
                  key: 1311,
                  name: '电视剧啊电化教育也方便不卡张卡',
                  age: 25,
                  address: '未发货防静电未回复',
                },
                {
                  key: 1312,
                  name: '第三段时时刻刻你加班',
                  age: 18,
                  address: '薪酬改革的合规文化',
                },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: '体育体育欧你猜·',
    age: 32,
    address: '干活吧v九点半v就不能',
  },
];

// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const App: React.FC = () => {
  const [checkStrictly, setCheckStrictly] = useState(false);

  return (
    <>
      <Space align="center" style={{ marginBottom: 16 }}>
      树形表格数据
      </Space>
      <Table<DataType>
        columns={columns}
        rowSelection={{ ...rowSelection, checkStrictly }}
        dataSource={data}
      />
    </>
  );
};

export default App;